<template>
	<view class="hotel-pages-list" :style="{background:pageColor}">
		<fixed>
			<view :style="{background:pageColor}">
				<view class="fix-info rel">
					<view class="space-top abs" :style="{background:primaryColor}"> </view>
					<!-- #ifdef H5 -->
					<view class="abs" style="width:100%;top:10rpx">
					<!-- #endif -->
						<!-- #ifndef H5 -->
						<view class="abs" style="width:100%;top:0">
						<!-- #endif -->
							<view class="search-info flex-y-center fill-base pd-lg">
								<view @tap.stop="$util.goUrl({url:`/user/pages/choose/city?type=3`})"
									class="flex-y-center">
									<view class="ellipsis" style="max-width: 130rpx;">{{city_info | handleCityText}}
									</view>
									<i class="iconfont icon-down" style="transform: scale(0.5);"></i>
								</view>
								<view class="flex-1 ml-md">
									<search @input="toSearch" type="input" :keyword="param.title" :isDel="true"
										:padding="0" :radius="30" height="70rpx" backgroundColor="#F0F0F0"
										placeholder="请输入酒店名称">
									</search>
								</view>
							</view>
							<view class="rank-item pl-md flex-y-center f-paragraph c-black">
								<picker @change="sortChange($event,'sortIndex')" :value="sortIndex" :range="sortList"
									range-key="title">
									<view class="flex-y-center">
										{{sortList[sortIndex].title}}
										<i class="iconfont iconxiala"></i>
									</view>
								</picker>
								<picker @change="sortChange($event,'starIndex')" :value="starIndex" :range="starList"
									range-key="title">
									<view class="flex-y-center">
										{{starList[starIndex].title}}
										<i class="iconfont iconxiala"></i>
									</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
		</fixed>


		<view @tap.stop="goDetail(index)" class="list-item flex-warp fill-base pd-lg ml-md mr-md radius-16"
			:class="[{'mt-md':index!=0}]" v-for="(item,index) in list.data" :key="index">
			<!-- #ifdef H5 -->
			<view class="cover radius-16">
				<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${item.cover}')`}">
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.cover"></image>
			<!-- #endif -->
			<view class="flex-1">
				<view class="f-title text-bold ellipsis">{{item.title}}</view>
				<view class="flex-between mt-sm" style="margin-bottom: 8rpx;">
					<view class="flex-warp">
						<i class="iconfont iconpingfen1 icon-font-color" style="margin-right:4rpx;"
							:style="{backgroundImage: aindex< item.star?`-webkit-linear-gradient(270deg, #FAD961 0%, #F7A31C 100%)`:`-webkit-linear-gradient(270deg, #E5E5E5 0%, #E5E5E5 100%)`}"
							v-for="(aitem,aindex) in 5" :key="aindex"></i>
					</view>
					<view class="flex-y-baseline f-icontext c-caption">
						<view class="flex-y-baseline c-warning text-bold" style="margin-right: 2rpx;">¥<view
								class="f-mini-title">
								{{item.min_price||0}}
							</view>
						</view>起
					</view>
				</view>
				<view class="f-caption">{{item.address}}</view>
				<view class="flex-y-center f-caption mt-sm">
					<i class="iconfont iconjiudianliebiao-dizhi"></i>
					<view class="mr-sm">距离您直线</view>
					{{item.distance}}
				</view>
			</view>
		</view>

		<load-more :noMore="list.current_page >= list.last_page && list.data.length > 0" :loading="loading">
		</load-more>

		<block v-if="!loading&&list.data.length<=0&&list.current_page==1">
			<abnor v-if="location.lat&&location.lng" :tip="[{text: '暂无酒店数据'}]" :isCenter="true">
			</abnor>
			<block v-if="!location.lat&&!location.lng">
				<!-- #ifdef H5 -->
				<abnor type="NOT_LOCATION" title="暂无酒店数据" :isCenter="true"></abnor>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<abnor type="NOT_LOCATION" title="暂无酒店数据" @confirm="toOpenLocation" :isCenter="true"
					:button="[{ text: '开启定位' , type: 'confirm' }]" btnSize=""></abnor>
				<!-- #endif -->
			</block>
		</block>
		<view class="space-footer"></view>


		<!-- #ifdef APP-PLUS -->
		<longbingbing-open-location-info ref="open_location_info" :isAdd="false"></longbingbing-open-location-info>
		<longbingbing-app-check-auth type="location" ref="app_check_item"
			@confirm="toConfirmOpenLoca"></longbingbing-app-check-auth>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				starList: [{
					id: 0,
					title: '全部星级'
				}, {
					id: 1,
					title: '一星级'
				}, {
					id: 2,
					title: '二星级'
				}, {
					id: 3,
					title: '三星级'
				}, {
					id: 4,
					title: '四星级'
				}, {
					id: 5,
					title: '五星级'
				}],
				starIndex: 0,
				sortList: [{
					id: 1,
					title: '由近及远'
				}, {
					id: 2,
					title: '由远及近'
				}],
				sortIndex: 0,
				loading: true,
				param: {
					page: 1,
				},
				list: {
					data: []
				}
			}
		},
		computed: mapState({}),
		onLoad(options) {
			let {
				title
			} = options
			this.options = options
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			uni.setNavigationBarTitle({
				title
			})
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapMutations(['updateUserItem', 'updateServiceItem', 'updateTechnicianItem', 'updateMapItem',
				'updateDynamicItem', 'updateShopstoreItem'
			]),
			async initIndex(refresh = false) {
				await this.getList()
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			async initRefresh() {
				this.param.page = 1
				await this.initIndex(true)
			},
			async toOpenLocation() {
				// #ifdef APP-PLUS
				if (plus.os.name == 'Android' && plus.navigator.checkPermission(
						'android.permission.ACCESS_FINE_LOCATION') ===
					'undetermined') {
					this.$refs.app_check_item.open()
				} else {
					this.toConfirmOpenLoca()
				}
				// #endif
				// #ifndef APP-PLUS
				this.toConfirmOpenLoca()
				// #endif
			},
			async toConfirmOpenLoca() {
				// #ifdef MP-WEIXIN
				let privacyCheck = this.$refs.user_privacy.check()
				if (privacyCheck) {
					this.$refs.user_privacy.open()
					return
				}
				// #endif
				this.initRefresh()
			},
			toSearch(val) {
				this.param.title = val
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.param.page = 1
				this.getList()
			},
			sortChange(e, key) {
				this[key] = e.detail.value
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.param.page = 1
				this.getList()
			},
			async getList() {
				let {
					list: oldList,
					sortIndex,
					sortList,
					starIndex,
					starList
				} = this
				let {
					id: sort
				} = sortList[sortIndex]
				let {
					id: star
				} = starList[starIndex]
				let {
					lat = 0, lng = 0
				} = this.location
				// #ifdef APP-PLUS
				if (!lat && !lng) {
					this.list = {
						data: [],
						last_page: 1,
						current_page: 1
					}
					this.loading = false
					this.$util.hideAll()
					return
				}
				// #endif
				let {
					title: city = ''
				} = this.city_info
				let param = Object.assign({}, this.param, {
					lat,
					lng,
					sort,
					star,
					city
				})

				if (star == 0) {
					delete param.star
				}

				let newList = await this.$api.hotel.hotelList(param)
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			goDetail(index) {
				let {
					id
				} = this.list.data[index]
				this.$util.goUrl({
					url: `/hotel/pages/detail?id=${id}`
				})
			}
		},
		filters: {
			handleCityText(val) {
				let text = `未知城市`
				if (val && val.title) {
					text = val.title
				}
				return text
			}
		}
	}
</script>

<style lang="scss">
	.hotel-pages-list {
		.fix-info {
			/* #ifdef H5 */
			height: 224rpx;
			/* #endif */
			/* #ifndef H5 */
			height: 214rpx;
			/* #endif */

			.space-top {
				width: 100%;
				height: 50rpx;
				top: 0;
			}

			.search-info {
				width: 100%;
				border-radius: 40rpx;
				top: 0;
			}

			.rank-item {
				height: 84rpx;

				.flex-y-center {
					width: 210rpx;

					.iconxiala {
						font-size: 20rpx;
						transform: scale(0.6);
					}
				}
			}
		}

		.list-item {
			.cover {
				width: 160rpx;
				height: 185rpx;
			}

			.flex-1 {
				width: calc(100% - 178rpx);
				margin-left: 18rpx;

				.f-title {
					color: #181818;
					line-height: 36rpx;
				}

				.f-caption {
					color: #777;

					.iconfont {
						font-size: 28rpx;
						color: #A3A3A3;
						margin-right: 6rpx;
					}
				}

				.iconpingfen1 {
					font-size: 26rpx;
				}
			}
		}
	}
</style>